<template>
	<view>
		<view  v-if="types==0">
			<view>
				<view class="topActive"></view>
				<view class="acTop">
					<view style="width: 35rpx;height: 35rpx;"></view>
					<view class="titlebar">会议活动</view>
					<view top="onNavigationBarButtonTap()">
						<image src="../../static/scan.png" style="width: 35rpx;height: 35rpx" ></image>
					</view>
				</view>
			</view>
			<uni-search-bar  @confirm="search" @change="search" placeholder="搜索" bgColor="#000" :radius="100" v-model="active_name"></uni-search-bar>
			<view class="huodong">
				<view class="act-lie">
					<view class="zuinquire">
						<picker mode="date" :value="date" :start="startDate" :end="endDate"  :range="year" @change="yearChange">
							<view class="zstate">时间</view>
						</picker>
						<image src="../../static/xialajiantoublack.png" class="xialajiantoublack"></image>
					</view>
					<view class="zuinquire">
						<picker mode="selector" :range="type" range-key="name" @change="typeChange" >
							<view class="zstate">类型</view>
						</picker>
						<image src="../../static/xialajiantoublack.png" class="xialajiantoublack"></image>
					</view>
				</view>
				<view class="cmon" v-for="(item,index) in comData" :key="index">
					<view class="catering">
						<view class="caorg">{{item.active_name}}</view> 
						<view>
							<image src="../../static/act_activity.png"  class="act_activity"></image>
							<text class="crd">截止时间：{{item.end_time}}</text>
						</view>
					</view>
					<view class="team">
						<view class="">
							<image src="../../static/act_zuzhi.png"  class="peop"></image>
						</view>
						<text class="sheteam">组织机构：{{item.organization_name}}</text>
						<button type="primary" class="act_btn" @click="toInfor(item.id)">报名</button>
					</view>
				</view><!--餐饮管理组织-->
			</view>
		</view>
	</view>
</template>
<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	export default {
		components: {
			uniSearchBar,
		},
		data() {
			return {
				comData:[],
				year:[],
				type:[],
				date:[],
				yearValue:'',
				typeValue:'',
				page: 1,
				more: 'loading',
				hasDate:true,//是否还有数据
				showloading: false, //是否显示loading,
				types:'',
				active_name:''
			}
		},
		onNavigationBarButtonTap() {
			console.log("你点击了按钮")
			// 允许从相机和相册扫码
			uni.scanCode({
				success: function (res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
				}
			});
		},
		onShow() {
			console.log('credit');
		},
		onLoad(res) {
			this.getType()
			this.postSociety()
			this.types=uni.getStorageSync('types')
		},
		onReachBottom() {
			if (this.hasDate) {
				this.page++
				this.showloading = true
				this.postSociety()
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// search(e) {
			// 	console.log(e.value);
			// },
			yearChange(e){
				console.log(e);
				// let index=e.detail.value
				// this.yearValue=index
				this.postSociety({year:e.detail.value})
			},
			typeChange(e){
				console.log(e);
				// let index=e.detail.value
				// this.typeValue=index
				this.postSociety({type:e.detail.value})
			},
			// 跳转详情页
			toInfor(id){
				let pid=id;
				console.log(pid)
				uni.navigateTo({
					url:'./detail_active/detail_active?id='+pid
				})
		},
		toArray(data,obj={},arr=[]){
			for(let i in data){
				obj={}
				obj.id=i
				obj.name = data[i]
				arr.push(obj)
			}
			return arr
		},
		getType(){
			let type = this.typeValue
			let year = this.yearValue
			// this.$get('v1/society/get-type',{type,year})
			this.$get('v1/actives/gettype',{type})
			.then(res=>{
				this.type=this.toArray(res.data)
				this.year=res.data.year
			})
		},
		// 搜索
		search(){
			let _this = this
			let id = _this.id
			this.$get('v1/actives/activelist',{active_name:_this.$data.active_name.value})
			.then(function(res){
				console.log(res.data.data.info)
				_this.comData =res.data.data.info;
			})
			console.log(_this.comData)
		},
		// 接口
		postSociety(e){
			if(e){
				
			}else{
				e={}
			}
			e.page=this.page
			this.$get('v1/actives/activelist',e).then(res=>{
				this.comData=res.data.data.info
			})
			// .then(res => {
			// 	console.log(res.data.data.info)
			// 	if (res.data.code == 200) {
			// 		// this.yearStatus=this.toArray(res.data.yearStatus) 
			// 		// this.type=this.toArray()
			// 		if (res.data.data.info.length) {
			// 			this.hasData = true
			// 			// this.bgData =this.bgData.concat(res.data.data.info)
			// 			this.comData=res.data.data.info
			// 			// this.bgData=res
			// 		} else {
			// 			this.hasData = false
			// 		}
			// 		this.showloading = false
			// 	}
			// })
			// .catch(error => {
			// 	console.log(error);
			// 	this.showloading = false
			// })
		},
		// bindDateChange: function(e) {
		// 	this.date = e.target.value
		// },
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			
			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		}
	}
}
</script>

<style>
.acTop{
	display: flex;
	align-items: center;
	justify-content:space-between;
	background-color: #C30D24;
	padding:15rpx 30rpx ;
}
.topActive{width: 100%;height: 48rpx;background-color: #C30D24;}
.titlebar{
	text-align: center;
	/* width: 100%;
	height: 80rpx; */
	color: #fff;
	font-size: 32rpx;
	/* line-height: 80rpx; */
}
.camera{
	/* width: 45rpx;
	height: 45rpx; */
	/* background-color: #fff; */
	/* position: absolute; */
	/* top: 70rpx;
	right: 80rpx; */
}

.xialajiantoublack{
	width: 22rpx;
	height: 20rpx;
	vertical-align: middle;
	/* margin: 0 20rpx;
	margin-top: -2rpx; */
	margin: 20rpx 0rpx 0 20rpx;
}
.seach{
	/* width: 6z50rpx; */
	/* margin: 0 auto; */
}
.huodong{
	padding: 10rpx 0;
	width: 650rpx;
	/* height: 920rpx; */
	/* background-color: #FFFFFF; */
	border-radius: 15rpx;
	background:rgba(255,255,255,1);
	/* box-shadow:0px 8rpx 42rpx 12rpx rgba(153,153,153,0.1); */
	margin: 0rpx auto;
/* 	padding: 25rpx 20rpx; */
}
.act-lie{
	display: flex;
	padding: 20rpx 10rpx 20rpx 25rpx;
	background: #F6F6F6;
	border-radius: 15rpx;
}
.zuinquire{
	text-align: center;
	width: 50%;
	display: flex;
	margin-left: 100rpx;
}
.zstate{
	font-weight: 600;
	font-size:32rpx 
}
.caorg{
	font-size: 26rpx;
	font-weight: 600;
	color: #333;
	width: 180rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.crd{
	font-size: 24rpx;
	color: #999999;
	float: right;
	margin-left: 30rpx;
}
.sheteam{
	font-size: 24rpx;
	color: #999999;
}
.team,.catering{
	overflow: hidden;
	line-height: 50rpx;
	display: flex;
}

.peop,.act_activity{
	width: 30rpx;
	height: 30rpx;
	margin: 0 15rpx;
	vertical-align: middle;
	margin-bottom: 10rpx;
}

.cmon{
	padding: 10rpx 30rpx;
	border-top: 2rpx solid #EAEAEA;
	margin-bottom:15rpx;
	border-radius: 20rpx;
	box-shadow:0px 8rpx 42rpx 12rpx rgba(153,153,153,0.1);
}
.team{
	position: relative;
}
.act_btn{
	font-size: 20rpx;
	border-radius:50rpx;
	background: #00A0E9;
	height: 35rpx;
	line-height: 35rpx;
	position: absolute;
	right: 30rpx;
	top:5rpx

}
</style>
